<template>
  <div id="app">
     <!-- 搜索框 -->
    <Search></Search>
    <!-- 轮播图 -->
    <Swiper></Swiper>
    <!-- 列表 -->
    <List></List>
     <div class="list">
      <h1>店铺列表</h1>
      <div class="shop" v-for="(item,index) in shoplist" :key="index">
        <div class="imgbox">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="text">
          <div class="name">{{item.name}}</div>
          <div class="desc">{{item.minPriceTip}} {{item.monthSalesTip}}</div>
        </div>
      </div>
    </div>
      <!-- Tabbar -->
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import axios from 'axios'

import Search from './components/Search.vue'
import Swiper from './components/Swiper.vue'
import List from './components/List.vue'
import Tabbar from './components/Tabbar.vue'

export default {
  components:{ 
    Search,
    Swiper,
    List,
    Tabbar
  },
  data(){
        return {
            shoplist:[]
        }
    },
  mounted(){ 
    axios.get('/api/shop/list').then((res)=>{
      this.shoplist = res.data.list; 
    })
  }
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
.list .shop{
  display: flex;
  margin: 10px;
}
.list .shop .imgbox{
  width: 80px;
  margin-right: 10px;
}
.list .shop .imgbox img{
  width: 100%;
}
</style>
